<template>
    <div>
        <h2>充值页面</h2>
        <table class="table table-bordered">
            <tr>
            <td>余额</td>
            <td><input type="text" v-model="state.money"></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="radio" name="use" v-model="money"  value="微信">微信
                    <input type="radio" name="use" v-model="money" value="支付宝">支付宝
                    <input type="radio" name="use"  v-model="money" value="现金">现金
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="button" value="充值" @click="chat">
                </td>
            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import axios  from 'axios';
import { reactive,toRefs,onMounted } from 'vue';
import { useRouter,useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
const data = reactive({
    state:{},
    money:''
})

const {state,money} = toRefs(data);

//反填
onMounted(()=>{
    fantian()
})

const fantian = ()=>{
    axios({
        url:'/api/Member/FantianId',
        method:'get',
        params:{
            id:route.query.id
        }
    })
    .then(res => {
        console.log(res);
        state.value= res.data.data;
        money.value = res.data.data.money;
    })
    .catch(err => {
        console.log(err);
    })
}



const chat = ()=>{
    if(state.value.money == '')
    {
        alert('余额不能为空');
        return;
    }
    if(isNaN(Number(state.value.money)))
    {
        alert('余额必须填数字类型');
        return;
    }
    let obj={
        id:route.query.id,
        money:state.value.money,
    }
    axios({
        url:'/api/Member/ChongUpd',
        method:'put',
        params:obj
    })
    .then(res => {
        console.log(res);
        if(res.data.data>0)
        {
            alert('充值成功');
            router.push('/ShowMember');
        }
        else{
            alert('充值失败');
            return;
        }
    })
    .catch(err => {
        console.log(err);
    })
}
</script>

<style scoped>

</style>